<template>
	<div class="page">
      <div class="ltarea">
         <router-link v-for="item in pages" :to="item.url" :class="{active: item.status}">{{ item.name }}</router-link> 
      </div>
	</div>
</template>

<script>
export default {
   data (){
      return {
         next: true,
         prev: false
      }
   },
   props: {
      pages: {
         type: Array,
         default: [
            {
               num : '1',
               status : true
            },
         ]
      }
   }
}
</script>

<style lang="">
   
   .page {
      margin-bottom: 0.1rem;
      overflow: hidden;
      text-align: center;
      clear: both;
      padding: 0.2rem 0;
   }
   .page a {
      color: #4261DF;
      display: inline-block;
      margin-right: 0.03rem;
      height: 0.18rem;
      line-height: 0.18rem;
      border:0.01rem solid #4261DF;
      padding: 0 0.05rem;
   }
   .page .active {
      color: #333;
      border:none;
      font-weight: bold;
   }
   .page a:hover {
      color: #fff;
      background-color: #4261DF;
   }
</style>